<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="title + '客户'"
      :width="modalWidth"
      @cancel="handleClose"
      @ok="onSubmit"
      :destroyOnClose="true"
      :visible="visible"
      :confirmLoading="confirmLoading"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleClose">
            取消
          </a-button>
          <a-button @click="onSubmit" type="primary">确认</a-button>
        </div>
      </template>
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="ruleForm" :model="model" :rules="rules">
          <a-row>
            <a-col :span="21">
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="客户名称"
                    prop="customerName"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入客户名称"
                      v-model.trim="model.customerName"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8"
                  ><a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="客户编号"
                    prop="customerNumber"
                    hasFeedback
                  >
                    <a-input
                      :disabled="title === '编辑' ? true : false"
                      placeholder="请输入客户编号"
                      v-model.trim="model.customerNumber"
                    /> </a-form-model-item
                ></a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="客户类型"
                    hasFeedback
                    prop="customerTypeCode"
                  >
                    <a-tree-select
                      v-model.trim="model.customerTypeCode"
                      style="width: 100%"
                      :dropdown-style="{
                        maxHeight: '400px',
                        overflow: 'auto',
                      }"
                      :tree-data="treeData"
                      :replaceFields="replaceFields"
                      placeholder="请选择客户类型"
                      tree-default-expand-all
                      v-if="treeData.length > 0"
                    >
                    </a-tree-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="电话号码"
                    prop="telephone"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入电话号码"
                      v-model.trim="model.telephone"
                    /> </a-form-model-item
                ></a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="联系人"
                    prop="contacts"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入联系人"
                      v-model.trim="model.contacts"
                    /> </a-form-model-item
                ></a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="公司地址"
                    prop="companyAddress"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入公司地址"
                      v-model.trim="model.companyAddress"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="电子邮箱"
                    prop="email"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入电子邮箱"
                      v-model.trim="model.email"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="公司电话"
                    prop="companyPhone"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入公司电话"
                      v-model.trim="model.companyPhone"
                    /> </a-form-model-item
                ></a-col>
                <a-col :span="8"
                  ><a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="备注"
                    prop="companyPhone"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入备注"
                      v-model.trim="model.remark"
                    /> </a-form-model-item
                ></a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import { validatorPhone } from "@/unit/rule";
export default {
  props: {
    treeData: {
      type: Array,
    },
    disabled: {
      type: Boolean,
    },
  },

  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      modalWidth: 652, // 抽屉宽度
      model: {},
      show: true, //根据菜单类型，动态显示隐藏表单元
      上级部门: "角色名称",
      menuLabel: "菜单名称",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      replaceFields: {
        children: "customerTypes",
        title: "customerTypeName",
        key: "id",
        value: "id",
      },
    };
  },
  computed: {
    rules() {
      return {
        customerName: [{ required: true, message: "请输入客户名称!" }],
        customerNumber: [{ required: true, message: "请输入客户编号!" }],
        customerTypeCode: [{ required: true, message: "请输入客户类型!" }],
        telephone: [{ validator: validatorPhone, trigger: "change" }],
      };
    },
  },
  methods: {
    // 新增
    modalAdd() {
      this.modalEdit({});
    },
    // 编辑
    modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.model = Object.assign({}, record);
    },

    onChangeMenuType() {},
    onSubmit() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.handleSubmit();
        } else {
          return false;
        }
      });
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    async handleSubmit() {
      let res;
      this.confirmLoading = true;
      if (this.model.id) {
        res = await api.customerEdit(this.model); //修改
      } else {
        res = await api.customerAdd(this.model); //新增
      }
      if (res.code && res.code !== 200) {
        this.$message.error(res.message);
        this.confirmLoading = false;
        return;
      }
      this.$message.success(res.message);
      this.confirmLoading = false;
      this.$emit("ok");
      this.visible = false;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.modalWidth = screenWidth;
      } else {
        this.modalWidth = 1677;
      }
    },
  },
};
</script>

<style></style>
